<template>
  <div class="intergral-transform">
    <c-title :text="name"></c-title>
    <div class="header">
      <p class="available">可用{{fun.getCustomTextLang('member_center.credit1','积分')}}：{{ available_point }}</p>
    </div>
    <div class="main">
      <p class="left" style="font-size: 0.9375rem;">转兑数量</p>
      <van-field style="font-size: 1.5rem;" v-model="value" :border="false" @focus="focusInput">
        <template #left-icon>
          <div class="iconfont icon-jifen" style="color: #e25e5e; margin-right: 0.625rem;"></div>
        </template>
        <template #extra>
          <span class="all" @click="handleAll">全部</span>
        </template>
      </van-field>
      <div class="line"></div>
      <div class="prompt">
        <p style="margin: 0.3rem 0;">转兑比例<span style="margin: 0 0.2rem;">{{out_rate}}</span>:<span  style="margin: 0 0.2rem;">{{in_rate}}</span></p>
        <p style="margin-bottom: 1.5rem;">{{another_name_shop}}{{another_name_point}}预计到账数量{{count}}</p>
      </div>
      <div class="wrapper">
        <span class="mobile">手机号</span>
        <input v-model="mobile" class="input" type="number" placeholder="请输入要转入的手机号" />
      </div>
      <button class="btn" @click="submit">确认转兑</button>
    </div>

    <van-popup v-model="show" round>
      <div class="wx-dialog">
        <div style="border-bottom: 1px solid #f5f5f5; padding-bottom: 1rem;">
          {{message}}
          </div>

        <div  v-if="!isWeixin"><button class="wx-btn" @click="confirm_handle">确认</button>	</div>
        <div v-else>
          <wx-open-launch-weapp id="launch-btn" class="launch-btn" :username="info.gh_id" :path="info.path"
            @error="handleErrorFn" @launch="handleLaunchFn" @ready="readyFn">
            <script type="text/wxtag-template">
              <style type='text/css'>.wx-btn { border: none; width: 8rem;height: 3rem;line-height: 3rem;display: block;margin: 2% auto 0;
                border-radius: 0.25rem;color: #e25e51;text-align: center;background-color:#fff}</style>
              <div> <button class="wx-btn">确认</button>	</div>
        </script>
          </wx-open-launch-weapp>
        </div>
      </div>
    </van-popup>

  </div>
</template>

<script>
import { Dialog } from 'vant';
export default {
  data() {
    return {
      info: {
        gh_id: "",
        path: ""
      },
      isWeixin:false,//是否微信环境
      point: "",
      available_point: 0,
      value: 0,
      mobile: "",
      another_name_shop: "",
      another_name_point: "",
      name: "",
      out_rate: 0,
      in_rate: 0,
      message: "",
      show: false
    };
  },
  computed: {
    count() {
      if (this.out_rate !== 0 && this.in_rate !== 0) {
        let res = this.value * this.in_rate;
        res = res.toString()
        if (res.length > 5) {
          res = Number(res);
          res = res.toFixed(2)
        }
        console.log(res)
        return res;
      }
      return 0;
    }
  },
  activated() {
    this.value = 0;
    let ua = navigator.userAgent.toLowerCase();
    let isWXWork = ua.match(/wxwork/i) == 'wxwork';
    this.isWeixin = !isWXWork && ua.match(/micromessenger/i) == 'micromessenger';
    this.show =false
    this.get_exchange()

  },
  methods: {
    focusInput(){
      if(this.value ==0){
        this.value='';
      }
    },
    confirm_handle(){
      this.value = 0;
      this.show = false;
    },
    handleAll() {
      this.value = this.available_point;
    },
    async get_exchange() {
      let { result, data, msg } = await $http.get("plugin.point-exchange.frontend.exchange.index");

      if (result == 0) {
        return this.$toast(msg);
      }
      if (data.member_mobile) {
        let mobile = localStorage.getItem("point_phone");
        if(mobile){
          this.mobile = mobile
        }else{
          this.mobile = data.member_mobile;
        }
      }

      this.available_point = data.member_point
      this.name = data.name;
      this.out_rate = data.out_rate;
      this.in_rate = data.in_rate;
      this.another_name_shop = data.another_name.shop;
      this.another_name_point = data.another_name.point;

    },
    async confirm() {
      let json = {
        point: this.value,
        mobile: this.mobile
      }
      let { result, msg, data } = await $http.get("plugin.point-exchange.frontend.exchange.exchange", json);

      if (result == 0) {
        return this.$toast(msg)
      }
      localStorage.setItem("point_phone",this.mobile);
      if (data.web_url) {
        this.$toast(msg)
        window.location.href = data.web_url;
      } else if(data.web_url=='' && data.mini_url && data.mini_base_id){
        this.message = msg;
        this.show = true;
        this.info.path = data.mini_url
        this.info.gh_id = data.mini_base_id
      }else{
        this.$toast(msg)
      }



    },
    readyFn(e) {
      console.log('readyFn', e.detail);
    },

    handleErrorFn(e) {
      console.log('fail', e.detail);
    },

    handleLaunchFn(e) {
      console.log('success');
    },
    submit() {
      Dialog.confirm({
        message: `
        ${this.value}个${this.fun.getCustomTextLang('member_center.credit1','积分')}将转兑到${this.another_name_shop}的${this.another_name_point}
        到账数量：${this.count}${this.another_name_point}
          手机号：${this.mobile}`,
      })
        .then(() => {
          this.confirm()
        })
        .catch(() => {
          // on cancel
        });
    }
  }
};
</script>

<style scoped lang="scss">

::v-deep .van-field__left-icon {
  display: flex;
  justify-content: center;
  align-items: center;
}

::v-deep .van-cell {
  padding: 0;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}

.intergral-transform {
  .wx-btn {
    border: none;
    width: 8rem;
    height: 3rem;
    line-height: 3rem;
    display: block;
    margin: 2% auto 0;
    border-radius: 0.25rem;
    color: #e25e51;
    text-align: center;
  }

  .wx-dialog {
    padding: 1.8125rem 0.75rem 0.5rem 0.75rem;
    border-radius: 2.3125rem;
    width: 18rem;
  }

  .btn {
    display: block;
    margin-top: 2rem;
    width: 16.88rem;
    height: 2.75rem;
    line-height: 2.75rem;
    background-color: #ff5d5d;
    margin: 2rem auto 0;
    border: none;
    border-radius: 0.3rem;
    color: #fff;
  }

  .prompt {
    text-align: left;
    color: #c2c2c2;
    font-size: 0.7813rem;
  }

  .wrapper {
    display: flex;
    margin-top: 1rem;
    justify-content: flex-start;
    font-size: 0.8rem;

    .mobile {
      margin-right: 1rem;
    }

    .input {
      border: none;
      width: 80%;
      border-bottom: 1px solid #f2f2f2;
      padding-bottom: 0.5rem;
    }
  }

  .line {
    width: 100%;
    height: 1px;
    background-color: #f2f2f2;
  }

  .available {
    padding-top: 1.9rem;
    padding-left: 1.8rem;
    text-align: left;
    color: #101010;
  }

  .all {
    color: #e25e5e;
    font-size: 0.8rem;
  }

  .left {
    text-align: left;
  }

  .main {
    position: relative;
    top: -75px;
    width: calc(100% - 0.8125rem);
    margin: 1rem auto;
    border-radius: 10px;
    background: #fff;
    padding: 1rem;
  }

  .header {
    background: linear-gradient(180deg, rgba(255, 213, 72, 1) 0%, rgba(242, 242, 242, 0) 100%);
    height: 8rem;
  }
}
</style>
